<template>
  <div class="xd-LearningHome-PoliticalNews-NewsHome p_10">
    <el-card class="m_t_b_5px news_panel" shadow="hover">
      <div slot="header">  
        <!-- <div class="title">科普文章</div> -->
        <el-tabs v-model="activeName" class="el-tabs-first-indent" @tab-click="doSwitchList">
          <el-tab-pane label="科普文章" name="tabKpwz"> </el-tab-pane>
          <el-tab-pane label="减压音乐" name="tabJyyy"> </el-tab-pane>
          <el-tab-pane label="心理影片" name="tabXlyp"> </el-tab-pane>
        </el-tabs>
      </div>
       <el-card class="box-card m_t_b_5px">
          <el-form ref="form" :model="formPolicy" label-width="80px">
            <el-form-item label="类别">
              <el-radio-group v-model="formPolicy.themeType" size="small" @change="handleRadioClick">
                <el-radio-button
                  :label="item.dictValue"
                  v-for="item in themeTypeList"
                  :key="item.dictValue"
                  >{{ item.dictLabel }}</el-radio-button
                >
              </el-radio-group>
            </el-form-item>
          </el-form>
          <div style="font-size: 14px">
            <el-input
              v-model="form.scienceTitle"
              clearable
              placeholder="搜索标题"
              style="width: 700px; margin:20px 10px; float: right"
              size="small"
            > <el-button slot="append" icon="el-icon-search"  @click="doSearch" ></el-button></el-input>
          </div>
        </el-card>
      <ul class="news_list item_flex_ul">
        <li v-for="p in newsList" :key="p.scienceId"  @click="goNewsDetail(p.scienceId)">
          <!-- <span class="title">
            <span style="color:red;" v-if="p.i_is_top">【顶】</span>
            · {{ decodeURI(p.v_seach_v_notice_title)}}
          </span>
          <span class="time">{{p.dtm_publish_date}}</span>
           -->
          <el-row style="width: 100%">
            <el-col :span="24" style="font-size: 12px">
              <div>
                <span
                  style="font-weight: bold; font-size: 18px; margin-right: 12px"
                  >{{p.scienceTitle}}</span
                >
              </div>
              <div style="margin-top: 12px">
                <span style="font-size: 14px; color: #a5a0a0">{{formartContent(p.scienceContent)}}</span>
              </div>
              <div style="font-size: 14px; float: right">
                <span style="margin-left: 10px"
                  ><i class="el-icon-view" style="color: #cb2c21"></i> {{p.studySum}}
                  阅读</span
                >
              </div>
            </el-col>
          </el-row>
        </li>
        <p v-if="!newsList.length" class="no-data">{{ NO_DATA }}</p>
      </ul>
      <el-pagination
        @size-change="sizeChange"
        @current-change="pageChange"
        :current-page="form.pageNumber"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="form.pageSize"
        :layout="PAGE_LAYOUT"
        :total="total"
      ></el-pagination>
    </el-card>
  </div>
</template>
<script>
export default {
  name: "NoticeHome",
  data() {
    return {
      activeName: "tabKpwz",
      form: {
        pageNumber: 1,
        pageSize: 10,
        scienceTitle:'',
        scienceType:1,
      },
      total: 0,
      newsList: [],
      formPolicy: { themeType: ""},
       themeTypeList: [
        {
          dictValue: "",
          dictLabel: "全部类别",
        },
        {
          dictValue: "1",
          dictLabel: "自我成长",
        },
        {
          dictValue: "2",
          dictLabel: "人际交往",
        },
        {
          dictValue: "3",
          dictLabel: "原生家庭",
        },
        {
          dictValue: "4",
          dictLabel: "亲密关系",
        },
        {
          dictValue: "5",
          dictLabel: "学习训练",
        },
        {
          dictValue: "6",
          dictLabel: "压力管理",
        }
      ],
    };
  },
  mounted() {
    this.getNews();
  },
  methods: {
    doSwitchList(key){
      switch (key.name) {
        case "tabKpwz":
                 this.form.scienceType = 1;
          break;
       case "tabJyyy":
                 this.form.scienceType = 2;
          break;
        case "tabXlyp":
               this.form.scienceType = 3;
          break;
        default:
          break;
      }
      this.getNews();
    },
    getNews() {
      this.newsList =[];
      utils.post("/psychic/psychicScience/list", this.form, (res) => {
        if (res.success) {
          this.total = res.data.total;
          this.newsList = res.data.rows;
        }
      });
    },
    sizeChange(val) {
      this.form.pageSize = val;
      this.getNews();
    },
    pageChange(val) {
      this.form.pageNumber = val;
      this.getNews();
    },
    goNewsDetail(id) {
      this.$router.push({ path: '/Cinziqao/Detail', query: { id: id, activeMenu: '/Cinziqao' } })
    },
    formartContent(value){
      var  content = value.replace(/<[^>]+>/g, "");
      return content.substring(0,150)+ (content.length>150?"...":"");
    },
    handleRadioClick(){
      this.form.questionType = this.formPolicy.themeType;
      this.getNews()
    },
    doSearch(){
      this.form.questionType = this.formPolicy.themeType;
      this.getNews()
    },
  },
};
</script>
<style lang="less">
.xd-LearningHome-PoliticalNews-NewsHome {
  .news_panel {
    ul.news_list li {
      border-bottom: solid 1px #dcdfe6;
      padding-bottom: 5px;
    }
  }
}
</style>
